<template>
  <div id="app" style="width: 60%;height:850px;margin:0 auto;padding: 20px;">

    <div style="width: 14%;float: left;position: fixed;left: 22%">

      <el-card class="box-card" style="width: 100%;text-align: center">
        <div slot="header" class="clearfix">
          <div class="block">
            <el-avatar :size="98" :src="info.imageUrl"/>
            <p style="font-size: 24px;font-weight: 500">{{ info.programmer.nickName }}</p>
            <el-rate
                v-model="info.starRating"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>
          </div>
        </div>

        <el-button type="info" style="width: 200px">我要签约</el-button>
        <div style="padding: 20px 0 20px 0">
          <el-link type="primary" :underline="false" style="float: left;padding-left: 20px">我看过谁</el-link>
          <el-link type="primary" :underline="false" style="float: right;padding-right: 20px">谁看过我</el-link>
        </div>
      </el-card>

      <div style="width: 100%;height: 75px;background-color: #F7F7F7;text-align: center;margin-top: 10px">
        <div style="width: 30%;height: 100%;float: left;">
          <span>赞</span><br>
          <span style="font-size:18px;font-weight: 700">{{ info.fabulousNum }}</span>
        </div>
        <div style="width: 4%;height: 100%;float: left"/>
        <div style="width: 30%;height: 100%;float: left;">
          <span>关注</span><br>
          <span style="font-size:18px;font-weight: 700">{{ info.followerNum }}</span>
        </div>
        <div style="width: 4%;height: 100%;float: left"/>
        <div style="width: 30%;height: 100%;float: left;">
          <span>粉丝</span><br>
          <span style="font-size:18px;font-weight: 700">{{ info.fanNum }}</span>
        </div>
        <span style="font-size: 12px">如发现对方存在违法违规行为可 </span>
        <span style="font-size: 12px;color: #007bff"><a href="#"> 进行举报</a></span>
      </div>
    </div>

    <div style="width: 73%;float: right;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="pointer">个人介绍
          <el-tooltip class="item" effect="dark" content="更新个人履历" placement="top-start">
            <i class="el-icon-edit-outline" style="color: blue" @click="$router.push('/userLoginMain/infoMine')"/>
          </el-tooltip>
          </span>
          <span style="float: right;font-size: 14px;color: #8c939d">
            更新于：{{ info.programmer.updateTime }}
            浏览量：{{ info.pageViews }}
          </span>
        </div>

        <span v-html="info.programmer.programmerIntroduction"></span>

      </el-card>

      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>工作经历</span>
        </div>
        <el-timeline
            v-for="(activity, index) in workExperience"
            :key="index">
          <el-timeline-item v-if="activity.company" :timestamp="activity.workExperDesc">
            <span style="color: #007bff">
              {{ activity.beginTime }} <span style="color: black">-</span>
              {{ activity.endTime }} <span style="color: black">/</span>
              {{ activity.company }} <span style="color: black">/</span>
              {{ activity.position }}
            </span>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>教育经历</span>
        </div>
        <el-timeline
            v-for="(activity, index) in educationExperience"
            :key="index">
          <el-timeline-item v-if="activity.schoolName" :timestamp="activity.awardsDesc">
            <span style="color: #007bff">
              {{ activity.beginTime }} <span style="color: black">-</span>
              {{ activity.endTime }} <span style="color: black">/</span>
              {{ activity.schoolName }} <span style="color: black">/</span>
              {{ activity.perfessionName }}<span style="color: black">/</span>
              {{ activity.category }}
            </span>
          </el-timeline-item>
        </el-timeline>
      </el-card>


      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span class="pointer">技能
          <el-tooltip class="item" effect="dark" content="更新技能" placement="top-start">
            <i class="el-icon-edit-outline" style="color: blue" @click="$router.push('/userLoginMain/infoSkill')"/>
          </el-tooltip>
          </span>
        </div>
        <div v-for="(skill, index) in skills" :key="index">
          <span>{{ skill.skillName }}</span>
          <el-progress :text-inside="true" :stroke-width="26" :percentage=skill.skillScore></el-progress>
        </div>
      </el-card>


      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>作品</span>
        </div>
        <div v-for="(work, index) in works" :key="index" style="clear: left">
          <span style="color: #007bff">{{ work.personalProject.projectTitle }}</span><br>
          <span>项目地址: <a href="#"> {{ work.personalProject.projectUrl }}</a></span><br>
          <span>{{ work.personalProject.projectDesc }}</span>
          <el-divider style="clear: left"></el-divider>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>社区影响力
          <el-tooltip class="item" effect="dark" content="更新社区影响力" placement="top-start">
            <i class="el-icon-edit-outline" style="color: blue" @click="$router.push('/userLoginMain/infoInfluence')"/>
          </el-tooltip>
          </span>
        </div>

        <div v-if="influences.githubUrl!==''&influences.githubUrl!==null">
          <div style="width:15%;float: left">
            <span style="color: #007bff;font-weight: 600"> Git </span>
          </div>
          <div style="float: left;margin-left: 5%">
            <span> {{ influences.githubUrl }} </span>
          </div>
          <br>
        </div>

        <div v-if="influences.dribbbleUrl!==''&influences.dribbbleUrl!==null">
          <div style="width:15%;float: left">
            <span style="color: #007bff;font-weight: 600"> Dribbble </span>
          </div>
          <div style="float: left;margin-left: 5%">
            <span> {{ influences.dribbbleUrl }} </span>
          </div>
          <br>
        </div>

        <div v-if="influences.knowUrl!==''&influences.knowUrl!==null">
          <div style="width:15%;float: left">
            <span style="color: #007bff;font-weight: 600"> 知乎 </span>
          </div>
          <div style="float: left;margin-left: 5%">
            <span> {{ influences.knowUrl }} </span>
          </div>
          <br>
        </div>

        <div v-if="influences.stackoverflowUrl!==''&influences.stackoverflowUrl!==null">
          <div style="width:15%;float: left">
            <span style="color: #007bff;font-weight: 600"> Stackoverflow </span>
          </div>
          <div style="float: left;margin-left: 5%">
            <span> {{ influences.stackoverflowUrl }} </span>
          </div>
          <br>
        </div>

      </el-card>
      <el-card class="box-card" style="margin-top: 10px">

        <div slot="header" class="clearfix">
          <span style="float: left">用户评价 </span>
        </div>

        <div v-for="(comment,index) in commentList" :key="index" style="clear: left">
          <div style="float: left;margin-right: 20px">
            <el-avatar :size="45" :src="comment.imageUrl"/>
          </div>

          <div style="float: left; width: 68%">
            <span style="font-weight: 600">{{ comment.nickName }}</span><br>
            <span :title="comment.evaluatedDesc" class="com"><p>{{ comment.evaluatedDesc }}</p></span>
          </div>

          <div style="float: right;width: 20%">
            <span>{{ comment.createTime }}</span>
            <el-rate
                v-model="comment.averageScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>
          </div>
          <div style="clear: both">
            <el-divider></el-divider>
          </div>
        </div>

      </el-card>

      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>相似推荐</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            <i class="el-icon-refresh-left" @click="initInfo"> 换一批</i>
          </el-button>
        </div>

        <div style="width: 100%;height: 230px">
          <div style="width: 25%;height:100%;float: left;text-align: center" v-for="item in recommendList"
               :key="item.userId">
            <div class="block">
              <el-avatar :size="60" :src="item.imageUrl"/>
              <p>{{ item.nickName }}</p>
              <p>{{ item.userCareer }}</p>
              <p>背景:{{ item.userCompany }}公司</p>
              <el-button type="primary" round @click="getInfoMain(item.userId)">{{ item.salary }}/天</el-button>
            </div>
          </div>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "infoMain",
  data() {
    return {
      recommendList: [],
      userId: this.$store.state.userId,
      info: {
        programmer: {
          nickName: '加载中...'
        },
        work: {
          salary: 0,
          WDBT: "1970-01-01 00:00:00",
          WDET: "1970-01-01 00:00:00",
          WWBT: "1970-01-01 00:00:00",
          WWET: "1970-01-01 00:00:00",
        }
      },
      workExperience: [],
      educationExperience: [],
      skills: [],
      works: [],
      commentList: [],
      influences: {},
    }
  }, beforeRouteUpdate(to, from, next) {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.userId = to.query.userId
    this.taskId = to.query.taskId
    this.initInfo()
    this.initWorkExperience()
    this.initEducationExperience()
    this.initSkills()
    this.initWorks()
    this.initInfluences()
    this.initCommentList()
    loading.close()
    next();
  },
  methods: {
    getInfoMain(data) {
      this.$router.push({
        path: "/userLoginMain/userInfoMain",
        query: {userId: data}
      })

    },
    async initInfo() {
      const {data: res} = await this.$http.get('/homePage/myHomePage/' + this.userId)
      this.info = res.content
      const {data: response} = await this.$http.get('/programmer/recommend/' + res.content.programmer.programmerCareer + '/' + this.userId)
      this.recommendList = response.content;
    },
    async initWorkExperience() {
      const {data: res} = await this.$http.get('/workExper/workExperList/' + this.userId)
      this.workExperience = res.content
    },
    async initEducationExperience() {
      const {data: res} = await this.$http.get('/eduExper/eduExperList/' + this.userId)
      this.educationExperience = res.content
    },
    async initSkills() {
      const {data: res} = await this.$http.get('/personalSkill/personalSkill/' + this.userId)
      this.skills = res.content
    },
    async initWorks() {
      const {data: res} = await this.$http.get('/personalProject/personalProject/' + this.userId)
      this.works = res.content
    },
    async initInfluences() {
      const {data: res} = await this.$http.get('/proCommunity/proCommunity/' + this.userId)
      this.influences = res.content
    },
    async initCommentList() {
      const {data: res} = await this.$http.get('/evaluation/evaluation/' + this.userId)
      this.commentList = res.content
    },

  },
  mounted() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.initInfo()
    this.initWorkExperience()
    this.initEducationExperience()
    this.initSkills()
    this.initWorks()
    this.initInfluences()
    this.initCommentList()
    loading.close();
  }
}
</script>

<style scoped>

.pointer {
  cursor: pointer;
}

</style>